<template>
<div>
    <div class="box_bg">
        <h2 class="box_tit">
            <i class="icon icon1">
            </i>
            用户管理
            <i class="reti">
            </i>
        </h2>
        <!-- 内容区域 开始 -->
        <div class="components_con">
            <!-- input -->
            <div class="components_searchs" @keyup.enter="useSearch">

              <span class="tit">专业组：</span>
              <el-select v-model="searchForm.profession_group" filterable clearable placeholder="请选择/可输入查询" >
                <el-option v-for="item in professionGroupList" :key="item.id" :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
                <!-- <el-input placeholder="请输入所选机构"></el-input> -->
                <!-- <span>
                    所属院校：
                </span>
                <el-select v-model="searchForm.value" placeholder="请选择所属院校">
                    <el-option v-for="item in schoolList.options" :key="item.id" :label="item.name"
                    :value="item.name">
                    </el-option>
                </el-select> -->
                <span class="tit">姓名：</span>
                <el-input v-model="searchForm.name" placeholder="请输入姓名"></el-input>

                <span class="tit">邮箱：</span>
                <el-input v-model="searchForm.email" placeholder="请输入邮箱"></el-input>

                <el-button type="primary" icon="el-icon-search" size="mini" @click="useSearch" style="margin-left: 7px;">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
                <el-button size="mini" type="primary" icon="el-icon-view"
                    @click="advancedSearchState=!advancedSearchState">高级搜索</el-button>

                <div  v-if="advancedSearchState"  class="components_searchs">
                  <span class="tit">性别：</span>
                  <el-select v-model="searchForm.sex" placeholder="请选择">
                      <el-option label="全部" value=""></el-option>
                      <el-option v-for="item in StateList.sex" :key="item.id" :label="item.text"
                      :value="item.id">
                      </el-option>
                  </el-select>
                  <span class="tit">状态：</span>
                  <el-select v-model="searchForm.state" placeholder="请选择">
                      <el-option label="全部" value=""></el-option>
                      <el-option v-for="item in  StateList.work" :key="item.id" :label="item.text"
                      :value="item.id">
                      </el-option>
                  </el-select>
                </div>
            </div>
            <!-- 操作栏 -->
            <div class="components_btns">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="addUser">添加用户</el-button>
                <el-button type="primary" size="mini" @click="exportExcel">
                  <i class="iconfont icon-leading-iout"></i>
                  导出
                </el-button>
            </div>
            <el-table :data="UserTableList" border stripe style="width: 100%" class="hideScrollX">
                <el-table-column :show-overflow-tooltip="true" type="index" label="序号" align="center" width='60'></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="name" label="姓名" width="100" align="center">
                    <template slot-scope="scope">
                        <!-- <a href="javascript:void(0);" @click="detailsClick(scope.row.id)" type="text"
                        size="small"> -->
                            {{ scope.row.name }}
                        <!-- </a> -->
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="managermentCenter" label="所属机构" align="center"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="professionGroup" width="150" label="专业组" align="center"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="sexLabel" label="性别" align="center" width="80" ></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="idcard" label="身份证" align="center"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="mobile" label="电话" align="center"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="email" label="邮箱" align="center" ></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="stateLabel" label="工作状态" align="center" width="80" :formatter="formatState"></el-table-column>
                <!-- <el-table-column prop="politicalStatus" label="政治面貌" align="center">
                </el-table-column> -->
                <!-- <el-table-column prop="" label="备注"></el-table-column> -->
                <el-table-column prop="" label="操作" align="center" width="220">
                    <template slot-scope="scope">
                        <a href="javascript:void(0);" @click="editUser(scope.row.id)" type="text" size="small" class="edit">
                          编辑
                        </a>
                        <a href="javascript:void(0);" @click="detailsClick(scope.row)" type="text" size="small" class="edit">
                          详情
                        </a>
                        <a href="javascript:void(0);" type="text" size="small" class="del" @click="delShow(scope.row.id)">
                          删除
                        </a>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 页码 -->
            <div class="paginationBox">
                <el-pagination
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  :current-page.sync="page.currentPage"
                  :page-sizes="[15,30,50,100]"
                  :page-size="page.visiblePages"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="page.totalPages">
                </el-pagination>
            </div>
        </div>
        <!-- 表格删除--开始 -->
        <div class="layer" v-show="isDelShow">
            <div class="shade"></div>
            <div class="layerbody">
                <a href="javascript:void(0);" class="closes" @click='delShow'></a>
                <h4>提示框</h4>
                <div class="layerCon">
                    <div class="layerCon_l" style=""></div>
                    <div class="layerCon_r">
                        <h2>是否删除</h2>
                        <span>如果是请点击确定，不是请点击取消退出</span>
                    </div>
                </div>
                <div class="layerbtn">
                    <el-button class="btns" @click='deleteUser(currentId)' type="text" size="small">确定</el-button>
                    <el-button  class="btns cancel" @click="delShow" type="text" size="small">取消</el-button>
                </div>
            </div>
            <!-- //删除 del 弹层 -->
        </div>
        <!-- 表格删除--结束 -->
    </div>
    <user-details @refreshList="getUser" ref="userDetails"></user-details>
</div>
</template>

<script>
import {userListUrl,usersHandleUrl,getSchoolInfoByQueryParams} from "../../../axios/api.js"
import { config } from '@/config'
import {enums} from '@/constant'
import user_details from './UserDetails'
export default {
  data() {
      return {
          advancedSearchState: false,
          UserTableList: [],
          professionGroupList:[],//专业组列表
          isDelShow: false,
          currentId: null,
          //当前操作的ID
          isPage: false,
          isshow: false,
          fullWidth: document.documentElement.clientWidth,
          fullHeight: document.documentElement.clientHeight,
          schoolList: {
              options: [],
              value: ''
          },
          //搜索
          searchForm: {
              pageNum: 1,
              pageSize: 15,
              name: '',
              state:'',
              profession_group:'',
              email:'',
              sex:'',
          },
          page: { // page组件需要数据
              totalPages: null,
              visiblePages: 15,
              currentPage: 0
          },
          uesrFrom: { //用户检索数据
              username: '',
              //用户名
              nickname: '',
              //帐户名
              status: null,
              //状态
              sex: null,
              //性别
          },
          //状态列表
          StateList: {
            sex: enums.USER_SEX,
            work: enums.USER_WORK,
          }
      };
  },
  created() {
      if(this.$route.query.pageNum){
          this.page.currentPage = parseInt(this.$route.query.pageNum);
          this.page.visiblePages = parseInt(this.$route.query.pageSize);
      }
      console.log(this.$route.query.currentPage);
      console.log(this.page);
      //获取用户信息
      this.getUser();
      this.getSchool();
      this.getProfessionGroupList();
  },
  mounted() {},
  methods: {
    // 导出excel
    exportExcel(){
      let vm = this;
      let href = config.BASE_URL + api.userExportExcel;
      href += "?Authorization=" + localStorage.getItem("userToken");
      // 拼接条件
      for(let item in vm.searchForm){
        if(item == "pageNum" || item == "pageSize"){
          continue;
        }
        // 为了0和false
        if(vm.searchForm[item] != null && vm.searchForm[item] !== ""){
          href += "&" + item + "=" + vm.table.queryParams[item];
        }
      }

      window.location.href = href;
    },
    // 重置
    reset() {
      for (let key in this.searchForm) {
        if(key == "pageNum" || key == "pageSize"){
          continue;
        }
        this.searchForm[key] = null;
      }
      this.getUser();
    },
    //获取专业组列表
    getProfessionGroupList(){
      let self = this;
      self.axios({
        method: "get",
        url: api.professionGroup.queryAllList

      }).then(function(response) {
        if (response.data.success) {
          self.professionGroupList = response.data.data;
        } else {
          // 操作失败
          self.$message({
            message: response.data.msg,
            type: 'error',
            center: true
          });
        }
      })
    },
      //性别显示转换
      formatSex(row, column) {
          return row.sex == 0 ? '男': row.sex == 1 ? '女': '未知';
      },
      //在职状态显示转换
      formatState(row, column) {
          return row.state == 1 ? '在职': row.state == 2 ? '离职': '未知';
      },
      //删除
      delShow(ID) {
          this.isDelShow = !this.isDelShow;
          this.currentId = ID;
      },
      //编辑
      show() {
          this.isshow = !this.isshow;
          var Id = $(event.target).attr("data-id");
      },
      close() {
          this.isshow = !this.isshow;
      },
      // 获得学校
      getSchool() {
          let self = this;
          self.axios({
              method: "get",
              url: getSchoolInfoByQueryParams

          }).then(function(response) {
              if (response.data.success) {
                  self.schoolList.options = response.data.data;
              } else {
                  self.$message({
                      duration: 1000,
                      message: response.data.msg,
                      center: true,
                      type: 'error'
                  });
              }
          })
      },
      // 获得用户信息
      getUser() {
          let self = this;
          self.axios({
              method: "get",
              url: userListUrl,
              params: {
                  "pageNum": this.page.currentPage,
                  "pageSize": this.page.visiblePages
              }

          }).then(function(response) {
              if (response.data.success) {
                  self.UserTableList = response.data.data.list;
                  //页码列表
                  self.page.totalPages = response.data.data.total;
                  self.page.currentPage = response.data.data.pageNum;
                  // 显示页码
                  self.isPage = true;
              } else {
                  // 操作失败
                  self.$message({
                      message: response.data.msg,
                      type: 'error',
                      center: true
                  });
              }
          })
      },
      // 删除
      deleteUser(ID) {
          let self = this;
          self.axios({
              method: "delete",
              url: usersHandleUrl + ID
          }).then(function(response) {
              if (response.data.success) {
                  self.isDelShow = false;
                  self.page.currentPage = 1;
                  self.getUser();
              } else {
                  // 操作失败
                  self.$message({
                      message: response.data.msg,
                      type: 'error',
                      center: true
                  });
              }
          })
      },
      //添加新用户
      addUser() {
          this.$router.push({
              path: '/systems/user/add',
          })
      },
      //搜索
      useSearch() {
          let self = this;
          self.axios({
              method: "get",
              url: userListUrl,
              params: self.searchForm
          }).then(function(response) {
              if (response.data.success) {
                  self.UserTableList = response.data.data.list;
                  if(self.UserTableList.lengt > 0){
                    //页码列表
                    self.page.totalPages = response.data.data.total;
                    self.page.currentPage = response.data.data.pageNum;
                  }
              } else {
                  self.$message({
                      duration: 1000,
                      message: response.data.msg,
                      center: true,
                      type: 'error'
                  });
              }
          })
      },
      // 每页多少条
      handleSizeChange(val) {
        if(isNaN(val)){
            val = 15;
        }
        // 点击分也是 调用列表
        this.page.visiblePages = val;
        this.getUser();
      },
      handleCurrentChange(val) {
          if(val < 1){
              val = 1;
          }
          // 点击分也是 调用列表
          this.page.currentPage = val;
          this.getUser();
      },
      editUser(id) {
          let self = this;
          this.$router.push({
              path: '/systems/user/add?id='+id + '&pageNum=' + self.page.currentPage + '&pageSize=' + self.page.visiblePages,
          })
      },
      // 查看详情
      detailsClick(val) {
        _.find(this.schoolList.options,function(item){
          // return item == val.
        })
        this.$refs.userDetails.showDialog(val);
      },
      // 导出用户表
      exportUserInfo(){
        let self = this;
        let href = self.downloadStudentInfo;
        href += "?Authorization="+localStorage.getItem("userToken");
        window.location.href = href;
      },
  },
  components: {
    "user-details":user_details
  }
  };
</script>
<style scoped>

</style>
